.wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 1;
}

.search {
  background: var(--ps-immutable-off-white);
  transition: background-color ease-out 0.1s;
  font: inherit;
  margin-right: 1.5px;
  border: 1px solid var(--ps-ui-border);
  display: flex;
  flex-grow: 1;
  height: 37px;
  width: 100%;

  &,
  &::placeholder {
    color: var(--ps-immutable-placeholder-text) !important;
  }
}

.searchWithSync {
  @extend .search;

  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 1px solid var(--ps-ui-border);
  margin-right: 0;
}

.search-synced {
  @extend .search;

  border-color: var(--ps-immutable-linked-border);
}

.search:focus {
  background: var(--ps-immutable-white);
}

.icon {
  cursor: pointer;

  & path {
    fill: var(--ps-grey-primary);
  }
}

.checked {
  @extend .icon;

  path {
    fill: var(--ps-immutable-linked-border);
  }
}

.sync {
  border: none;
  background-color: var(--ps-immutable-off-white);
  cursor: pointer;
  width: 40px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border: 1px solid var(--ps-ui-border);
  position: relative;
  border-left: none;
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}

.syncSelected {
  @extend .sync;

  border-top-color: var(--ps-immutable-linked-border);
  border-right-color: var(--ps-immutable-linked-border);
  border-bottom-color: var(--ps-immutable-linked-border);
}
